<script lang="tsx">
import { defineComponent } from 'vue'
import { ElDropdown, ElDropdownMenu, ElButton } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'

export default defineComponent({
  components: {
    ElDropdown, ElDropdownMenu, ArrowDown, ElButton,
  },
  props: {
    items: {
      type: Array,
      default: () => [],
    },
    label: {
      type: String,
      default: '更多',
    },
  },
  emits: ['handleCommand'],
  setup(props, context) {
    const handleCommand = (command):void => {
      context.emit('handleCommand', command)
    }
    return { handleCommand }
  },
  render() {
    return (
      <el-dropdown onCommand={this.handleCommand} v-slots={{
        dropdown: () => (
          <el-dropdown-menu>
            {
              this.items.map(item => <el-dropdown-item command={item} disabled={item.disabled} >{item.disabled}{item.label}</el-dropdown-item>)
            }
          </el-dropdown-menu>
        ) }}>
        <el-button type="primary" text>
          {this.label}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </el-button>
      </el-dropdown>
    )
  },
})
</script>

<style scoped lang="less">
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  // display: flex;
  // align-items: center;
  
}
</style>